<template>
    <div>
      <!-- n-card 展示;提示信息; 内容为 form表单;输入框 安全口令；有效期;确认和删除按钮  -->
      <!-- title="许可管理" -->

    <div class="n-layout-page-header">
        <n-card :bordered="false"> 
            <template #header>
                <n-space>
                    <n-icon size="18">
                    <FormOutlined />
                    </n-icon>
                    <span>许可管理</span>
                </n-space>
            </template>
        </n-card>
    </div>

    <n-card :bordered="false" class="mt-1">
        <n-alert  type="warning" >
          输入正确的安全口令，配置服务器应用程序许可，应用程序许可不允许在服务器之间通用。
        </n-alert>
  
        <!-- n-form ;表单应保证汉字和输入框在同一行 -->
        <div class="LicenseForm">
          <BasicForm
            submitButtonText="确认"
            layout="horizontal"
            :gridProps="{ cols: 1 }"
            :schemas="schemas"
            @submit="handleSubmit"
            @reset="handleReset"
          >
            <template #extraButtons>
              <n-button @click="handleDelete">删除</n-button>
            </template>
          </BasicForm>
        </div>
      </n-card>
    </div>
  </template>
  
  <script setup lang="ts">
  import { BasicForm, FormSchema } from '@/components/Form/index';
  import { useMessage } from 'naive-ui';
  import { FormOutlined } from '@vicons/antd';
  
  const message = useMessage();
  
  const schemas: FormSchema[] = [
    {
      field: 'password',
      component: 'NInput',
      label: '安全口令',
      componentProps: {
        type: 'password',
        placeholder: '请输入安全口令',
        showPasswordOn: 'click'
      },
      rules: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
      ]
    },
    {
      field: 'validityPeriod',
      component: 'NDatePicker',
      label: '有效期',
      componentProps: {
        type: 'date',
        clearable: true,
        placeholder: '请选择有效期'
      },
      rules: [
        { required: true, message: '请选择有效期', trigger: 'blur' }
      ]
    }
  ];
  
  function handleSubmit(values: Recordable) {
    if (!values) {
      return message.error('请填写完整信息');
    }
    console.log(values);
    message.success('许可配置成功');
  }
  
  function handleReset(values: Recordable) {
    console.log('重置表单:', values);
  }
  
  function handleDelete() {
    message.info('执行删除操作');
  }
  </script>
  
  <style scoped>
  .LicenseForm {
    width: 500px;
    margin: 20px auto 0;
    overflow: hidden;
    padding-top: 20px;
  }
  </style>